
<template>
  
  <div class="container">
    <!-- <div class="image" >
      <img src="../assets/image/logo.jpg" alt="图片无法显示">
    </div> -->
    <!-- <div class="both"> -->
      
      <div id="loginForm">
        <h2>登录</h2>
        <div class="inputbox">
          <label >您是：</label>
          <div class="radiobox">
            <div>
              <input v-model="loginType" value="1" type="radio" id="aLLManager" name="Worktype" checked>
              <label for="aLLManager">总公司管理员</label>
            </div>
            <div>
              <input v-model="loginType" value="2" type="radio" id="partManager" name="Worktype">
              <label for="partManager">分公司管理员</label>
            </div>
            
            <div>
            <input v-model="loginType" value="3" type="radio" id="gasWorker" name="Worktype" >
            <label for="gasWorker">加油站人员</label>
            </div>
          </div>
        </div>
        <div class="inputbox">
          <label for="number">账号：</label>
          <input id="number" required type="text" v-model="number" name="number" placeholder="请输入账号">
        </div>
        <div class="inputbox">
          <label for="password">密码：</label>
          <input @keyup.enter="goLogin" id="passeword" required type="password" v-model="password" name="password"  placeholder="请输入密码">
        </div>
        <!-- <router-link to="/main"> -->
          <button type="submit" @click="goLogin">登录</button>
        <!-- </router-link> -->
      </div>
    <!-- </div> -->
    
  </div>
  
</template>



  <script >
  import axios from 'axios'
import { ElMessage } from 'element-plus';
      export default {
    data(){
      return{
        widthOK:true,
        number:"",
        password:"",
        loginType:"1"
      }
    },
    mounted() {
      // this.getWindowWidth();
      // window.addEventListener('resize', this.getWindowWidth);
      
    },
    beforeUnmount() {
      // window.removeEventListener('resize', this.getWindowWidth);
    },
    methods: {
      
      //获取浏览器窗口宽度 如果小于990 就不要图片了
      // getWindowWidth() {
      //   console.log(window.innerWidth)
      //   if(window.innerWidth<990){
      //     this.widthOK=false
      //   } else{
      //     this.widthOK=true
      //   }
      // },
      // 登录接口
      goLogin(){
        var body = JSON.stringify({
           username: this.number,
           password: this.password
        });

        var config = {
           method: 'post',
           url: '/auth/login2',
           headers: { 
              'Content-Type': 'application/json', 
              'Accept': '*/*', 
           },
           data : body
        };
        var that = this;
        axios(config)
        .then(function (response) {
           var code = response.data.code
           var data= response.data.data;
           if(code==200){
              const {nickName} = data 
              localStorage.setItem("my_token",data.access_token)
              localStorage.setItem("role",data.role)
              localStorage.setItem("belong",data.belong);
              localStorage.setItem("nickName", nickName)
              that.$axios.defaults.headers.common['Authorization']= localStorage.getItem("my_token")
          //  设置好localStorage后再跳转页面
           that.$router.push({path:"/main"})
           }else if(code==0&&data.role!=that.loginType){
            that.$message.error('账号类型错误！')
           }else{
            that.$message.error(response.data.msg)
           }
           
        })
        .catch(function (error) {
           console.log(error);
            ElMessage.error('网络错误')
        });
        
    }
  }
  };
  </script>

<style scoped>
.container{
 display: flex; 
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 background:  url('../assets/image/logo.jpg') no-repeat ;
 background-size: cover;
}
input {
  padding: 8px ;
  border: none;
  border-radius: 10px;
  accent-color: var(--el-color-primary);
}
h2{
  margin-bottom: 40px;
}
.both{
  position: relative;
  padding-right: 5%;
}
.image{
  flex: 1;
  height: 100vh;
  width: 100vw;
  position: fixed;
  display: flex;
}
.image img{
  min-height: 100vh;
  min-width: 100vw;
}
#loginForm{
  border-radius: 10px;
  display: inline-block;

  background-color: #e3e8ef;
  padding: 60px 45px;
  margin-right:5%;
}
.inputbox{
  display: flex;
  margin: 15px 0;
}
input:focus{
  outline: none;
}
button{
  padding: 10px 30px;
  margin-top: 10px;
  border-radius: 5px;
  background-color:var(--el-color-primary);
  color: #fff;
  border: none;
  font-weight: bold;
}
.radiobox{
  display: flex;
  flex-direction: column;
}.radiobox>div>label{
  float: left;
}
.radiobox>div>input{
  float: left;
  transform: translate(0,30%);
  margin-right: 5px;
}
</style>